<template>
  <div class="take-content">
    <div class="take-content-header">
      <div class="header-left">
        <span class="header-addr iconfont icon-locationfill"></span>
        <span class="header-city">江宁区</span>
        <span class="header-conuty">丰顺祥黄焖鸡米饭(秣陵店)</span>
        <span class="split">|</span>
        <router-link class="change-city" to="">
          <span>切换地址</span>
          <svg class="icon category-icon" aria-hidden="true"><use xlink:href="#icon-arrow-ios-downward-outline"></use></svg>
        </router-link>
      </div>
      <div class="header-right">
        <router-link class="header-register" to="">注册</router-link>
        <router-link class="header-login" to="">登录</router-link>
        <div class="my-order">
          <svg class="icon category-icon" aria-hidden="true"><use xlink:href="#icon-dingdan"></use></svg>
          <router-link class="order" to="">我的订单</router-link>
        </div>
      </div>
    </div>
    <div class="take-content-nav">
      <div class="nav-left">
        <span class="left-shop-wrapper">
          <svg class="icon" aria-hidden="true"><use xlink:href="#icon-shangjia"></use></svg>
          <span class="shop-categroy">商家分类</span>
        </span>
        <span class="left-splt">|</span>
        <ul class="left-links">
          <li class="link-item" v-for="(item, index) in shopLinks" :key="index">
            <router-link class="link" :class="{ active: _shopLinkActiveIndex === item.key }" to="">{{ item.text }}</router-link>
          </li>
        </ul>
      </div>
      <div class="nav-right">
        <input class="search-input" type="text" />
        <div class="search-btn"><span class="iconfont icon-sousuo"></span></div>
      </div>
    </div>
    <div class="take-content-broad">
      <svg class="icon" aria-hidden="true"><use xlink:href="#icon-meituan2"></use></svg>
      <span class="commitment">:美团外卖向消费者郑重承诺:</span>
      <router-link class="gongshi" to="">平台公示</router-link>
    </div>
    <div class="take-content-body">
      <ul class="boxes">
        <li class="box-item" v-for="(box, index1) in showShops" :key="index1">
          <ul class="shops">
            <li class="shop-wrapper" v-for="(shop, index2) in box" :key="index2">
              <div class="shop" @mouseenter="_heartShow($event)" @mouseleave="_heartHide($event)">
                <img class="shop-img" :src="shop.path" alt="" />
                <h2 class="name">{{ shop.name }}</h2>
                <div class="rating"><el-rate v-model="shop.rating" disabled show-score text-color="#ff9900"></el-rate></div>
                <div class="info">
                  <span class="price-wrapper">
                    <span class="pre-price">起送:￥{{ shop.pre_price }}</span>
                    <span class="send-price">配送费:￥{{ shop.send_price }}</span>
                  </span>
                  <span class="time-wrapper">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-clock"></use></svg>
                    <span class="time">{{ shop.send_time }}分钟</span>
                  </span>
                </div>
                <div class="heart"><span class="iconfont">&#xe61f;</span></div>
              </div>
            </li>
          </ul>
          <hr class="split" />
        </li>
      </ul>
      <div class="load-more"><span @click="_loadMore">加载更多...</span></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shopLinks: [
        { key: 0, text: '全部' },
        { key: 1, text: '美食' },
        { key: 2, text: '正餐优选' },
        { key: 3, text: '超市' },
        { key: 4, text: '精选小吃' },
        { key: 5, text: '鲜果购' },
        { key: 6, text: '下午茶' }
      ],
      shopLinkActiveIndex: 0,
      shops: [],
      showShops: [],
      currentIndex: 0
    };
  },
  computed: {
    _shopLinkActiveIndex() {
      return this.shopLinkActiveIndex;
    }
  },
  created() {
    this.$http.get('/shops').then(resp => {
      this.shops = resp.body;
      this.showShops.push(this.shops[this.currentIndex]);
      this.currentIndex++;
      this.showShops.push(this.shops[this.currentIndex]);
    });
  },
  methods: {
    _loadMore() {
      if (this.currentIndex === this.shops.length - 1) {
        alert('没有更多了');
        return;
      }
      this.currentIndex++;
      this.showShops.push(this.shops[this.currentIndex]);
      this.currentIndex++;
      this.showShops.push(this.shops[this.currentIndex]);
    },
    _heartShow(e) {
      e.target.getElementsByClassName('heart')[0].style.display = 'block';
    },
    _heartHide(e) {
      e.target.getElementsByClassName('heart')[0].style.display = 'none';
    }
  }
};
</script>

<style lang="stylus" rel="stylussheet/stylus">
.take-content
  width 61.25rem
  margin 0 auto
  .take-content-header
    padding 3rem 0 1.25rem 0
    height 1.875rem
    line-height 1.875rem
    .header-left
      position relative
      float left
      font-size 0.75rem
      .header-addr
        font-size 1.25rem
      .header-city
        padding 0 0.3125rem 0 0
      .header-conuty
        margin-right 0.625rem
      .split
        color #AAAAAA
      .change-city
        color #ffa735
    .header-right
      position relative
      float right
      font-size 0
      .header-register
        display inline-block
        font-size 0.75rem
        height 1.875rem
        line-height 1.875rem
        padding 0 1.25rem
        border-radius 0.1875rem
        background #FFFFFF
        margin 0 0.3125rem
      .header-login
        @extend .header-register
      .my-order
        @extend .header-register
        .icon
          font-size 1rem
          height 1.875rem
          line-height 1.875rem
          vertical-align top
  .take-content-nav
    background #FFFFFF
    padding 0 1.25rem
    display flex
    height 5.9375rem
    line-height 5.9375rem
    .nav-left
      flex 1
      display inline-block
      .left-shop-wrapper
        .icon
          font-size 1.25rem
          height 5.9375rem
          vertical-align top
        .shop-categroy
          font-size 0.875rem
      .left-splt
        color #AAAAAA
        margin 0 0.625rem
      .left-links
        display inline-block
        font-size 0
        height 5.9375rem
        line-height 5.9375rem
        .link-item
          display inline-block
          height 5.9375rem
          line-height 5.9375rem
          .link
            font-size 0.875rem
            margin 0 0.625rem
            color #222222
            &.active
              color #FFC300
            &:hover
              color #FFC300
    .nav-right
      flex 0 0 18.4375rem
      display inline-block
      box-sizing border-box
      font-size 0
      .search-input
        display inline-block
        vertical-align middle
        width 14.625rem
        font-size 0.875rem
        color #666666
        height 2.5rem
        line-height 2.5rem
        border none
        border 0.0625rem solid rgba(7, 17, 27, 0.2)
        box-sizing border-box
        outline none
        border-right none
        padding 0 1.25rem
      .search-btn
        display inline-block
        width 3.125rem
        height 2.5rem
        line-height 2.5rem
        border 0.0625rem solid rgba(7, 17, 27, 0.2)
        box-sizing border-box
        text-align center
        vertical-align middle
        cursor pointer
        .icon
          font-size 1.125rem
  .take-content-broad
    height 5.9375rem
    line-height 5.9375rem
    background-color #FFFFFF
    margin-top 0.625rem
    .icon
      margin-left 1.25rem
      font-size 1.125rem
      vertical-align middle
    .commitment
      font-size 0.875rem
      font-weight 900
      color #FFC300
      vertical-align middle
    .gongshi
      font-size 0.875rem
      font-weight 700
      color blue
      text-decoration underline
      vertical-align middle
  .take-content-body
    width 61.25rem
    min-height 6.25rem
    margin-top 0.625rem
    box-sizing border-box
    background-color #FFFFFF
    padding 0.9375rem 0.3125rem 0 0.3125rem
    .boxes
      .box-item
        .shops
          font-size 0
          .shop-wrapper
            display inline-block
            width 15.125rem
            height 16.875rem
            padding 1.25rem 1rem 0 1rem
            box-sizing border-box
            cursor pointer
            &:hover
              background rgba(7, 17, 27, 0.1)
            .shop
              position relative
              .shop-img
                width 13rem
                height 9.75rem
              .name
                font-size 1rem
                color #313131
                margin-top 0.625rem
                width 9.375rem
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
              .rating
                margin 0.625rem 0 0.5rem 0
                .el-icon-star-on
                  font-size 0.875rem
              .info
                display flex
                font-size 0
                .price-wrapper
                  flex 1
                  text-align left
                  font-size 0.75rem
                  color #666666
                .time-wrapper
                  flex 0 0 3.75rem
                  width 3.75rem
                  text-align right
                  font-size 0.75rem
                  color #666666
                  .icon
                    font-size 0.75rem
                    vertical-align top
              .heart
                position absolute
                top 0.3125rem
                right 0.3125rem
                width 1.875rem
                height 1.875rem
                line-height 1.875rem
                text-align center
                border-radius 50%
                background-color rgba(7, 17, 27, 0.4)
                z-index 998
                display none
                .iconfont
                  font-size 1.5rem
                  vertical-align middle
                  color #E5E5E5
      .split
        border none
        width 57.5rem
        border-bottom 0.0625rem solid rgba(1, 17, 27, 0.2)
        margin-top 1.25rem
        margin-bottom 0
    .load-more
      height 3.125rem
      line-height 3.125rem
      font-size 0.875rem
      text-align center
      font-weight 500
      span
        padding 0.3125rem
        cursor pointer
        color #444
</style>
